import {View, Button, Image, Text} from '@tarojs/components';
import {useState} from "react";
import Utils from "@/utils/common";
import {Cell, Icon} from "@antmjs/vantui";

function AvatarChooser(pros) {
  const [avatarUrl, setAvatarUrl] = useState(pros.defaultAvatarUrl ||'');

  const title = pros.title || '头像:';
  const avatarMarginLeft = pros.avatarMarginLeft || '40PX';


  const handleChooseAvatar = (e) => {
    if (e.detail.avatarUrl) {
      setAvatarUrl(e.detail.avatarUrl);
      pros.avatar.current = e.detail.avatarUrl;
    } else {
      Utils.showErrorToast('取消选择');
    }
  };
  return (
    <View style={{backgroundColor: 'yellow'}}>
      <Cell
        renderIcon={<Text>{title}</Text>} renderTitle={<View style={{
        width: '60PX',
        height: '60PX',
        marginLeft: avatarMarginLeft,
      }}
        >
        <Button openType='chooseAvatar' onChooseAvatar={handleChooseAvatar}
          style={{
                  width: '60PX',
                  height: '60PX',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  padding: '0PX',
                }}
        >
          {avatarUrl ? (
            <Image src={avatarUrl} style={{width: '60PX', height: '60PX'}} />
          ) : (
            <Icon name='add' size='20PX'></Icon>
          )}
        </Button>
      </View>}
      />
    </View>
  );
}

export default AvatarChooser;
